<!DOCTYPE html>
<html>
<head>
<script src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
<link href="layui/css/layui.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.js" charset="UTF-8"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table id="demo" lay-filter="test"></table>
 
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
	  var table = layui.table;
	  
	  //第一个实例
	  table.render({	 
	    elem: '#demo'
	    ,height: 315
	    ,url: 'Gscxservlet' //数据接口
	    ,page: true //开启分页
	    ,cols: [[ //表头
	      {field: 'id', title: 'ID',  sort: true, fixed: 'left'}
	      ,{field: 'dianhua', title: '电话', } 
	      ,{field: 'youxiang', title: '邮箱', }
	      ,{field: 'dizhi', title: '姓名', }
	      ,{field: 'Jianjie', title: '简介', }
	      
	      ,{field: 'right', align:'center',toolbar:'#barDemo'}
	    ]]
	  });
	 
	//监听工具条
	table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	 var data = obj.data; //获得当前行数据
	 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	 var tr = obj.tr; //获得当前行 tr 的DOM对象
	 console.log(data);
	 if (layEvent === 'detail') { //查看
	   
	  //do somehing
	 } else if (layEvent === 'del') { //删除
	  layer.confirm('真的删除行么', function(index) {
	   obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	   layer.close(index);
	   //向服务端发送删除指令
	   //写对应ajax
	   $.ajax({ 
	    url : "Gsscservlet",

	    type : "get",//请求方式
	    data : {//参数
	     id : data.id
	    },
	    success : function(res) {//成功以后的回调函数
	     if (res == 1) {
	      alert("删除成功！");
	      window.location.reload();
	     } else {
	      alert("删除失败！");
	     }
	    }
	   });

	  });
	  } else if(layEvent === 'edit'){ //编辑
	    //do something
	    
	    layer.open({
	      type : 1, //Page层类型
	      area : [ '800px', '400px' ],
	      title : [ '修改公司信息', 'font-size:18px' ],
	      shadeClose : true,
	      shade : 0, //遮罩透明度
	      maxmin : true, //允许全屏最小化
	      content : $("#updateForm"), //弹窗路径
	      success : function(layero, index) {
	       $('#id').val(data.id);
	       $('#dianhua').val(data.dianhua);
	       $('#youxiang').val(data.youxiang);
	       $('#dizhi').val(data.dizhi);	    
	       $('#Jianjie').val(data.Jianjie);	      
	       $('#imgUrl').attr("src", data.imgUrl);
	      },

	     });
	 
		layui.use('upload', function() {
			var upload = layui.upload;

			//执行实例
			var uploadInst = upload.render({
				elem : '#img' //绑定元素
				,
				url : 'upload' //上传接口
				,
				done : function(res) {
					//上传完毕回调
					$("img").attr("src", res.data);
				},
				error : function() {
					//请求异常回调
					//alert("上传失败");
				}
			});
		});

		layui.use([ 'laydate', 'form' ], function() {
			var laydate = layui.laydate;
			var form = layui.form;
			//执行一个laydate实例
			laydate.render({
				elem : '#createdate' //指定元素
			});

			
			form.on('submit(btn)', function(data) {
				console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

				data.field.imgurl = $("img").attr("src");

				//写对应ajax
				$.ajax({
					url : "Gsxgservlet",//地址
					type : "get",//请求方式
					data : data.field,
					success : function(res) {//成功以后的回调函数
						if (res == 1) {
							alert("修改成功！");
							window.location.reload();
						} else {
							alert("修改失败！");
						}
					}
				});

				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

		});
	}
	});

	});


</script>
	<script type="text/html" id="imgTpl">
    < img src="{{d.imgUrl}}" />
 </script>
 <!-- 行内工具栏 -->
 <script type="text/html" id="barDemo">
        
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</ a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</ a>
 </script>
<!-- 编辑表单 -->
 <div id="updateForm" style="display: none">
  <form class="layui-form" lay-filter="updateform">
   <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
   <div class="layui-form-item">
    <label class="layui-form-label">编号</label>
    <div class="layui-input-block">
     <input type="text" name="id" placeholder="请输入" autocomplete="off"
      class="layui-input" id="id" disabled="disabled">
    </div>
   </div>
   
   <div class="layui-form-item">
    <label class="layui-form-label">电话</label>
    <div class="layui-input-block">
     <input type="text" name="dianhua" placeholder="请输入"
      autocomplete="off" class="layui-input" id="dianhua" >
    </div>
   </div>
   
   <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
     <input type="text" name="youxiang" placeholder="请输入"
      autocomplete="off" class="layui-input" id="youxiang">
    </div>
   </div>
   
   <div class="layui-form-item">
    <label class="layui-form-label">地址</label>
    <div class="layui-input-block">
     <input type="text" name="dizhi" placeholder="请输入"
      autocomplete="off" class="layui-input" id="dizhi" >
    </div>
   </div>
   
   <div class="layui-form-item">
    <label class="layui-form-label">简介</label>
    <div class="layui-input-block">
     <input type="text" name="Jianjie" placeholder="请输入"
      autocomplete="off" class="layui-input" id="Jianjie" >
    </div>
   </div>
  
           
   <div class="layui-form-item">
    <div class="layui-input-block">
     <button class="layui-btn" lay-submit lay-filter="btn">立即提交</button>
     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
   </div>
   <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
  </form>
 </div>

</body>
</html>